<template>
  <div class="search">
    <Card class="card-view">
      <Form
        ref="searchForm"
        :model="queryParam"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="日期" prop="queryDate">
          <LDataPicker
            format="yyyy-MM-dd"
            type="date"
            v-model="queryParam.queryDate"
            placeholder="日期"
            :clearable="false"
            style="width: 200px"
            @on-change="handleDataChange"
          />
        </Form-item>
      </Form>
    </Card>
    <Card class="card-view">
      <div style="height: 500px">
        <EchartsView :option="chartOption" ref="echartsView" />
      </div>
    </Card>
    <Card class="card-view">
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="dataSource"
        ref="table"
        class="mt_10"
      >
        <template #rangeIndex="{ row, index }">
          <strong>{{ index + 1 }}</strong>
        </template>
      </Table>
    </Card>
    <!-- <Row type="flex" justify="end" class="mt_10">
          <Page v-bind="pageOption" v-on="pageListener"></Page>
        </Row> -->
  </div>
</template>

<script>
import { SimpleTableMixins } from "@/mixins/SimpleTableMixins.js";
import { getShareRange } from "@/api/member.js";
import * as dayjs from "dayjs";
import EchartsView from "@/components/publicView/echarts-view/index.vue";

export default {
  mixins: [SimpleTableMixins],
  components: {
    EchartsView,
  },
  data() {
    let that = this;
    return {
      action: {
        listAction: getShareRange,
      },
      queryParam: {
        queryDate: dayjs().format("YYYY-MM-DD"),
      },
      columns: [
        // 表头
        // {
        //   title: "排名",
        //   key: "rangeIndex",
        //   align: "center",
        //   width: 100,
        //   slot: "rangeIndex",
        // },
        {
          title: "会员昵称",
          key: "nickName",
          minWidth: 100,
        },
        {
          title: "会员名称",
          key: "username",
          minWidth: 100,
        },
        {
          title: "会员手机号",
          key: "mobile",
          minWidth: 100,
        },

        {
          title: "推荐人数",
          key: "count",
          width: 200,
        },
        //   {
        //     title: "详细",
        //     key: "detail",
        //     minWidth: 300,
        //     tooltip: true,
        //   },
      ],
      chartOption: {
        grid: {
          left: 100,
          right: 100,
        },
        xAxis: {
          type: "category",
          data: [],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          // name: '推荐人数'
        },
        yAxis: {
          type: "value",
          axisLabel: {
            // show: false,
          },
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            data: [],
            label: {
              show: true,
              position: "top",
            },
            type: "bar",
            barMaxWidth: 50,
            itemStyle: {
              color: "rgba(91,143,249,0.5)",
              borderColor: "rgba(91,143,249,1)",
              borderWidth: 1,
            },
          },
        ],
      },
    };
  },
  methods: {
    handleDataChange(a, b) {
      this.$nextTick(() => {
        this.loadData();
      });
    },
    _parseListData(res = {}) {
      this.dataSource = res.result || [];
      let axisData = [];
      let serData = [];
      this.dataSource.forEach((item) => {
        axisData.push(item.nickName);
        serData.push({
          name: item.nickName,
          value: item.count,
        });
      });
      this.chartOption.xAxis.data = axisData;
      this.chartOption.series[0].data = serData;
    },
    _getParams() {
      let params = Object.assign({ ...this.staticParams }, {}, this.queryParam);
      return params;
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.search-form {
  background-color: #ffffff;
  padding: 0;
}
.card-view{
  margin-bottom: 10px;
}
</style>
